{extend name="public/base" /}
{block name="style"}
<link rel="stylesheet" href="/static/index/css/pay.css">
{/block}
{block name="content"}
<div class="header">
  <a href="javascript:void(0);" class="back-btn">
    <i class="fa fa-angle-left" style="font-size: 24px;"></i>
  </a>
  <h1 class="header-title">合约列表</h1>
</div>
<div class='weui-content'>
  <!-- 状态Tab切换 -->
  <div class="status-tabs">
    <div class="status-tab active" onclick="switchTab(0,this)">全部</div>
    <div class="status-tab" onclick="switchTab(1,this)">待结算</div>
    <div class="status-tab" onclick="switchTab(2,this)">已经结算</div>
    <div class="status-tab" onclick="switchTab(-1,this)">无效结算</div>
  </div>

  <!-- 充值记录列表 -->
  <div class="weui-panel">
    <div class="record-list" style="height:90vh; overflow:auto;">

    </div>

    <div class="load-more">加载中</div>
  </div>
</div>
{/block}
{block name="script"}
<script>
  var page = 1;
  var loading = false;  // 加载状态锁（防止并发请求）
  var order_status = 0;
  var switchTimer = null; // Tab切换防抖计时器
  var scrollTimer = null; // 滚动加载防抖计时器
  var requestId = 0; // 请求唯一标识（处理过期请求）

  // 滚动加载更多（防抖+节流）
  $(".record-list").infinite().on("infinite", function() {
    if (loading) return; // 正在加载中，直接拦截

    // 防抖：500ms内多次滚动只触发一次
    clearTimeout(scrollTimer);
    scrollTimer = setTimeout(function() {
      if (loading) return; // 二次检查，防止并发

      loading = true; // 上锁
      page++;
      load(page);
    }, 500); // 缩短延迟，平衡响应速度
  });

  // Tab切换（防抖+状态重置）
  function switchTab(status, obj) {
    // 清除上一次切换计时器（快速点击只执行最后一次）
    clearTimeout(switchTimer);

    // 更新请求标识，使旧请求失效
    requestId++;

    switchTimer = setTimeout(function() {
      // 重置列表和状态
      $(".record-list").empty();
      loading = false;
      page = 1;
      order_status = status;
      load(page, obj);
    }, 300); // 300ms防抖，避免快速切换
  }

  // 初始加载第一个Tab
  $(function() {
    // 主动触发第一个Tab的点击事件，确保参数正确传递
    const firstTab = $(".status-tabs").find(".status-tab").eq(0);
    firstTab.on("click", function() {
      switchTab(0, this); // 假设第一个Tab对应status=0
    });
    firstTab.trigger("click");
  });

  // 加载数据（增强状态管理和容错）
  function load(page, obj) {
    $('.load-more').show();
    const currentId = requestId; // 记录当前请求标识

    post("/trade-list.html", {
      page: page,
      limit: 7,
      field: "id",
      order: "desc",
      status: order_status
    }, function(res) {
      // 忽略过期请求（已被新请求替代）
      if (currentId !== requestId) return;

      // 重置加载状态
      loading = false;
      $('.load-more').hide();

      if (res !== "") {
        $(".record-list").append(res);
      } else {
        // 无更多数据时锁定加载，修正页码
        loading = true;
        page--; // 关键：防止页码无意义增长
        $(".record-list").find(".weui-cells__title").remove();
        $(".record-list").append("<div class=\"weui-cells__title\"><p class='center-div'>已无更多数据</p></div>");
      }

      // 更新Tab激活状态（确保obj存在）
      if (obj && $(obj).length) {
        $(obj).parent().find(".status-tab").removeClass("active");
        $(obj).addClass("active");
      }
    }, function() {
      // 错误回调（假设post已支持错误处理）
      if (currentId !== requestId) return;

      loading = false;
      $('.load-more').hide();
      page--; // 失败时回退页码
    });
  }
</script>
{/block}
